<template>
	<view>
		<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg" isBack="true"><block slot="content">用户登录</block></cu-custom>
		<view class="zai-box">
			<image src="../../static/zaizai-login/login.png" mode="aspectFit" class="zai-logo"></image>
			<view class="zai-title">LOGO区域</view>
			<view class="zai-form">
				<input class="zai-input" v-model="loginForm.username" placeholder="请输入用户名" />
				<input class="zai-input" v-model="loginForm.password" :password="textType" placeholder="请输入密码" />
				<div class="pwd-eye" @tap="changeType"><image :src="textType ? '../../static/Eye.png' : '../../static/Eye-fill.png'" /></div>
				<button class="zai-btn" @tap="Login">立即登录</button>
				<button class="zai-btn">其他登录</button>
				<navigator url="/pages/register/register" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { validateUse, validatePass } from '@/libs/checker';
export default {
	data() {
		return {
			loginForm: {
				username: 'admin',
				password: 'a123456'
			},
			textType: true
		};
	},
	methods: {
		async Login() {
			var user = validateUse(this.loginForm.username);
			if (!user.status) {
				return this.$refs.uToast.show({
					title: user.msg,
					type: 'error',
					position: 'top'
				});
			}
			var pwds = validatePass(this.loginForm.password);
			if (!pwds.status) {
				return this.$refs.uToast.show({
					title: pwds.msg,
					type: 'error',
					position: 'top'
				});
			}
			try {
				await this.$store.dispatch('handleLogin', this.loginForm);
				return this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					position: 'top',
					url: '/pages/index/index'
				});
			} catch (err) {
				return this.$refs.uToast.show({
					title: err,
					type: 'error',
					position: 'top'
				});
			}
		},
		register() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		},
		changeType() {
			this.textType = !this.textType;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.zai-box {
	margin-top: 100rpx;
	padding: 0 100rpx;
	position: relative;
}
.zai-logo {
	width: 100%;
	width: 100%;
	height: 310rpx;
}
.zai-title {
	position: absolute;
	top: 0;
	line-height: 360rpx;
	font-size: 68rpx;
	color: #fff;
	text-align: center;
	width: 100%;
	margin-left: -100rpx;
}
.zai-form {
	margin-top: 300rpx;
}
.zai-input {
	background: #e2f5fc;
	margin-top: 30rpx;
	border-radius: 100rpx;
	padding: 20rpx 40rpx;
	font-size: 36rpx;
	box-sizing: initial;
}
.input-placeholder,
.zai-input {
	color: #94afce;
}
.zai-label {
	padding: 60rpx 0;
	text-align: center;
	font-size: 30rpx;
	color: #a7b6d0;
}
.zai-btn {
	margin-top: 30rpx;
	background: #00ffd5;
	color: #fff;
	border: 0;
	border-radius: 100rpx;
	font-size: 36rpx;
}
.zai-btn:after {
	border: 0;
}
/*按钮点击效果*/
.zai-btn.button-hover {
	transform: translate(1rpx, 1rpx);
}
.pwd-eye {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	margin-top: -60rpx;
	right: 130rpx;
	z-index: 1000;

	image {
		width: 30rpx;
		height: 30rpx;
	}
}
</style>
